<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*子孙后代选择器,这里会选择每二个div下的所有p标签*/
/*        body div div p{
            color: chocolate;
        }*/
        /*子元素选择器*/
        /*body>div>p{
            color: blue;
        }*/
        /*body>p{color: darkblue}*/
        body>div>div>p{color: darkcyan}/*这里会选择p3和p4*/
        div>div>p{color: green}/*这里会选择p3,p4和p5,第一个标签没有固定的起始位置*/
        /*伪类选择器*/
        a:link{/*未访问*/
            color: darkgray;
        }
        a:visited{/*访问过*/
            color: green;
        }
        a:hover{/*悬停*/
            color: crimson;
        }
        a:active{/*点击*/
            color: cyan;
        }

    </style>
</head>
<body>
<a href="http://www.baidu.com">超链接1</a><a href="http://doc.canglaoshi.org">超链接2</a><a href="http://www.qq.com">超链接3</a>
<p>p1</p>
<div>
    <p>p2</p>
    <div>
        <p>p3</p>
    </div>
    <div>
        <p>p4</p>
        <div>
            <p>p5</p>
        </div>
    </div>
</div>
</body>
</html>